<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1" />
    <title>我的订单</title>
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../../css/foot.css">
    <link rel="stylesheet" type="text/css" href="../../css/nctouch_member.css">
    <link rel="stylesheet" type="text/css" href="../../css/nctouch_common.css">
    <link rel="stylesheet" type="text/css" href="../../css/nctouch_cart.css">
    <style>
        .bt {
            width: 15%;
            float: right;
            padding: 2px
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 0.6rem;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
            margin-top: 5px;
            margin-bottom: 5px;
            color: #fff;
            background-color: #FF650C;
            border-color: #FF650C;
            margin-left: 3.5px;
            margin-right: 3.5px;
        }

        .bt1 {
            width: 15%;
            float: right;
            padding: 2px
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 0.6rem;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
            margin-top: 5px;
            margin-bottom: 5px;
            color: #fff;
            background-color: #999;
            border-color: #999;
            margin-left: 3.5px;
            margin-right: 3.5px;
        }
    </style>
</head>

<body>
<section id="app">




    <div class="nctouch-main-layout">

        <div id="fixed_nav" class="nctouch-single-nav">
            <ul id="filtrate_ul" class="w33h">
                <li class="selected" style="width:25%">
                    <a href="javascript:void(0);" data-state="" onclick='ajax("all",this);'>全部<span style='display:none'>{{time}}</span></a>
                </li>
                <li style="width:25%">
                    <a href="javascript:void(0);" data-state="state_new" onclick='ajax("gotten",this)'>未领取</a>
                </li>
                <li style="width:25%">
                    <a href="javascript:void(0);" data-state="state_pay" onclick="ajax('saled',this);">已领取</a>
                </li>
                <li style="width:25%">
                    <a href="javascript:void(0);" data-state="state_wait" onclick="ajax('saled',this);">待揭晓</a>
                </li>
            </ul>
        </div>
        <div class="nctouch-order-list" id="order-list">
            <div class="order-list">

                <ul v-if='order_list && order_list.length'>

                    <li v-for='order in order_list'
                        :class='order.if_pay ? "gray-order-skin mt10" : "green-order-skin mt10"'

                    >
                        <div class="nctouch-order-item">
                            <div class="nctouch-order-item-con">
                                <div style="width:100%;height:40px; line-height:40px; font-size: 12px;border-bottom: 1px solid #eee;color:#999">
								<span>编号:{{order.order_sn}}

								</span>
                                    <span style="float:right">
								  {{order.time}}
								</span>
                                </div>
                                <div class="goods-block">
                                    <a href="javascript:" style="margin: 15px 0px 0px 0;">

                                        <div class="goods-pic">
                                            <img :src="order.goods_image_url" />
                                        </div>
                                        <dl class="goods-info" style="font-size: 12px;">
                                            <dt>
                                                <span style="color:#999">期<span style="color:#fff;">一一</span>号：</span>
                                                <span v-html='order.term'>

									  </span>
                                            </dt>
                                            <dt>
                                                <span style="color:#999">竞猜投入：</span>
                                                <span >
										{{order.order_amounts}} 元</span>
                                            </dt>
                                            <dt>
                                                <span style="color:#999">我的竞猜：</span>
                                                <span style="color:#FF650C">
										{{order.guesses}}(
										  {{order.caipiao_types}})</span>
                                            </dt>
                                            <dt>
                                                <span style="color:#999">开奖号码：</span>
                                                <span style="color:#FF650C">
										{{order.guesses}}
									  </span>
                                                <span> (
										{{order.nums}})</span>
                                            </dt>

                                        </dl>

                                    </a>
                                </div>
                            </div>
                            <div class="nctouch-order-item-footer">
                                <div class="store-totle">
								<span style="float: left;line-height: 1.7rem;color:#999;">
								  <span>
									<img style="width:0.8rem" :src="order.caipiao_img">
								  </span>&nbsp;

								  <span style="color:#999" v-if='order.caipiao_status==20'>再接再厉</span>

								  <span style="color:#FF650C" v-if='order.caipiao_status==30'>恭喜获胜</span>

								  <span v-if='order.caipiao_status == "10" && order.order_state >= 20' class="clock waiting" style="color:#999;margin-top:.1rem" data-term='<%=order.term%>' data-type='<%=order.caipiao_type%>'></span>


								  <span style="color:#999" v-if='order.caipiao_status==0'>已作废</span>

								  <span style="color:#999" v-if='order.caipiao_status==40'>已提货</span>

								  <span style="color:#FF650C" v-if='order.caipiao_status==50'>恭喜获胜</span>

								</span>
                                    <!--  0  已作废-->
                                    <!-- 10 未开奖-->
                                    <!-- 20 已开奖 未中-->
                                    <!-- 30 已开奖 中奖-->
                                    <!-- 40 已领取1.mars 2.interplanetary 3.gravity 4.dreid food 5.repidly 6.goods 7.entertainment 8.stranger 9.distence 10.sleeping bag 11.all over again 12.compare to 13.chellenging 14.crowded 15.-->
                                    <!-- 50 已转卖-->

                                    <a v-if='order.caipiao_status == 20' href="/" class="bt_001">再次竞猜</a>

                                    <a v-if='order.caipiao_status == 30' href="/wap/tmpl/member/vr_prize_list.html" class="bt">立即兑奖</a>


                                    <span v-if='order.caipiao_status == 10' class="clock" style="color:#999;margin-top:0.5rem">等待揭晓...</span>

                                    <a v-if='order.caipiao_status == 50' href="#" class="bt1">已领取</a>



                                </div>

                            </div>
                        </div>

                    </li>

                    <li class="loading" v-if='hasmore'>
                        <div class="spinner">
                            <i></i>
                        </div>订单数据读取中...</li>

                </ul>

                <div class="nctouch-norecord order" v-else>
                    <div class="norecord-ico">
                        <i></i>
                    </div>
                    <dl>

                        <dd>可以去看看哪些想要买的</dd>
                    </dl>
                    <a href="/wap" class="btn">随便逛逛</a>
                </div>

            </div>

        </div>
    </div>
    <!--底部总金额固定层End-->
    <div class="nctouch-bottom-mask">
        <div class="nctouch-bottom-mask-bg"></div>
        <div class="nctouch-bottom-mask-block">
            <div class="nctouch-bottom-mask-tip">
                <i></i>点击此处返回</div>
            <div class="nctouch-bottom-mask-top">
                <p class="nctouch-cart-num">本次交易需在线支付
                    <em id="onlineTotal">0.00</em>元</p>
                <p style="display:none" id="isPayed"></p>
                <a href="javascript:void(0);" class="nctouch-bottom-mask-close">
                    <i></i>
                </a>
            </div>
            <div class="nctouch-inp-con nctouch-inp-cart">
                <ul class="form-box" id="internalPay">
                    <p class="rpt_error_tip" style="display:none;color:red;"></p>
                    <li class="form-item" id="wrapperUseRCBpay">
                        <div class="input-box pl5">
                            <label>
                                <input type="checkbox" class="checkbox" id="useRCBpay" autocomplete="off" /> 使用充值卡支付
                                <span class="power">
                          <i></i>
                        </span>
                            </label>
                            <p>可用余额 ￥
                                <em id="availableRcBalance"></em>
                            </p>
                        </div>
                    </li>
                    <li class="form-item" id="wrapperUsePDpy">
                        <div class="input-box pl5">
                            <label>
                                <input type="checkbox" class="checkbox" id="usePDpy" autocomplete="off" /> 使用预存款支付
                                <span class="power">
                          <i></i>
                        </span>
                            </label>
                            <p>可用余额 ￥
                                <em id="availablePredeposit"></em>
                            </p>
                        </div>
                    </li>

                </ul>

                <div class="pay-btn">
                    <a href="javascript:void(0);" id="toPay" class="btn-l">确认支付</a>
                </div>
            </div>
        </div>
    </div>
    <div class="fix-block-r">
        <a href="javascript:void(0);" class="gotop-btn gotop hide" id="goTopBtn">
            <i></i>
        </a>
    </div>












</section>


<!-- <footer id="footer" class="bottom"></footer> -->
<script type="text/html" id="order-list-tmpl">

  </script>







<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script type="text/javascript" src="../../js/zepto.min.js"></script>
<script type="text/javascript" src="../../js/template.js"></script>
<script type="text/javascript" src="../../js/config.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../js/simple-plugin.js"></script>
<script type="text/javascript" src="../../js/zepto.waypoints.js"></script>
<script type="text/javascript" src="../../js/tmpl/order_payment_common.js"></script>
<script type="text/javascript" src="../../js/tmpl/vr_order_list2.js"></script>

<script>
    var host = "http://mlmbuy.com";
    var app = window.RiPanApp = new Vue({
            el: "#app",
            data: {
                time: '00:00',
                time_all:10000,
                order_list : [],
                hasmore:true
            },
            mounted: function (){}

        }
    );
</script>